<template>
  <view>
    <view class="container">
      <uni-segmented-control
				class="uni_segmented_control"
        :current="current"
        :values="items"
        style-type="text"
        active-color="#007aff"
        @clickItem="onClickItem"
				style="margin-top: -20rpx; background: #fff"
      />

      <view class="pb20"></view>

      <!-- 未读 -->
      <view class="notiy">
        <uni-card
          spacing="0"
          is-full
          :border="false"
          v-for="(item, index) in list"
          :key="index"
        >
          <template v-slot:title>
            <view class="slot-box">
              <!-- <uni-tag
                v-if="item.status == 0"
                text="未读"
                size="mini"
                type="error"
              />
              <uni-tag
                v-if="item.status == 2"
                text="已读"
                size="mini"
                type="default"
              /> -->
							<!-- {{item.content.indexOf('取消') == -1}} -->
							<image v-if="item.content.indexOf('取消') != -1" src="../../static/notice/xiangmu/11.png"></image>
							<image v-if="item.content.indexOf('取消') == -1" src="../../static/notice/xiangmu/12.png"></image>
              <text class="title">
								<text v-if="item.content.indexOf('取消') != -1">活动撤销</text>
								<text v-if="item.content.indexOf('取消') == -1">新活动</text>
							</text>
              <text class="extra">{{ item.createTime }}</text>
            </view>
          </template>
          <text class="content">{{ item.content }}</text>
					<view class="yidu" v-if="item.status == 0 && item.content.indexOf('取消') != -1">
						<image src="../../static/notice/xiangmu/10.png" mode="" />
						<text @click="isReadFn(item.djNoticeId)">标为已读</text>
					</view>
					<view class="yidu2" v-if="item.status == 0 && item.content.indexOf('取消') == -1">
						<view @click="goPage(item.djNoticeId, item.djCostId, item)" class="_item">
							<text>查看详情</text>
							<image src="../../static/notice/xiangmu/13.png" style="width:24rpx; height: 20rpx;"></image>
						</view>
					</view>
        </uni-card>
      </view>

      <view class="no-data" v-if="list.length === 0">
				<NoData style="height: 100%;" />
			</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { setDjRead } from "../../net/notice";
import { apiHuoDongTongZhi } from "../../net/dagnqunhuodong.js";
import NoData from "@/components/NoData.vue";

const current = ref(0);
const items = ref(["未读消息", "已读消息"]);
const list = ref([]);
const uid = uni.getStorageSync('userInfo').uid

// const status = current.value === 0 ? 0 : 2;
const params = ref({
  status: 0,
  uid,
  pageNum: 1,
  pageSize: 10,
});
const allTotal = ref(0);
const getList = async () => {
  const { data, total } = await apiHuoDongTongZhi(params.value);
  if (data.length > 0) {
    list.value = list.value.concat(data);
    allTotal.value = total;
  } else {
    list.value = [];
  }
  uni.stopPullDownRefresh();
};

onShow(() => {
  list.value = [];
  getList();
});

const onClickItem = (e) => {
  allTotal.value = 0;
  list.value = [];
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex;
    params.value.status = current.value == 0 ? 0 : 2;
    getList();
  }
};

// 标为已读
const isReadFn = (id) => {
	setDjRead(id + ",");
	params.value.pageNum = 1;
	allTotal.value = 0;
	list.value = [];
	getList();
};

const goPage = async (djNoticeId, djCostId, item) => {
  if (item.status == 0) {
    if (item.content.indexOf("取消") > -1) {
      await setDjRead(djNoticeId + ",");
      params.value.pageNum = 1;
      allTotal.value = 0;
      list.value = [];

      getList();
      return;
    }
    if (item.content.indexOf("取消") == -1) {
      uni.navigateTo({
        url: `../../pages/DJinitiateActivitiesInfos/index?id=${djCostId}`,
      });
      await setDjRead(djNoticeId + ",");
    }
  }
};

// 下拉刷新，获取最新的数据
onPullDownRefresh(() => {
  params.value.pageNum = 1;
  allTotal.value = 0;
  list.value = [];
  getList();
});
// 上拉加载
onReachBottom(() => {
  if (params.value.pageNum * params.value.pageSize >= allTotal.value) {
    uni.showToast({
      title: "数据全部加载",
      duration: 2000,
    });
    return;
  } else {
    params.value.pageNum++;
    getList();
  }
});
</script>

<style lang="scss">
@import "/static/common.scss";
image {
	width:48rpx;
	height:48rpx;
}

.container {
  height: 100vh !important;
  padding-top: 10px;
	background: #F9F9F9;
	.uni_segmented_control {
		width: 100%;
		position: fixed;
		top: 10rpx;
		z-index: 100;
	}
}

.pb20 {
  padding-bottom: 20px;
}

.uni-card {
  border-radius: 4px;

  &:not(:last-child) {
    margin-bottom: 30rpx !important;
  }
}

.slot-box {
  padding: 7px 10px;

  .title {
    flex: 1;
    margin-left: 10rpx;
    font-size: 28rpx;
    font-weight: bold;
  }

  .extra {
    font-size: 28rpx;
    color: #999;
  }
}

	.notiy {
		margin-top: 40rpx;
		width: 750rpx;
		padding: 0 25rpx;
		box-sizing: border-box;

		.uni-card {
			width: 700rpx;
			height: 300rpx;
			margin: 0 auto;
			background: #ffffff;
			border-radius: 20rpx;
		}

		.content {
			display: inline-block;
			width: 654rpx;
			min-height: 100rpx;
			font-size: 30rpx;
			color: #666666;
			padding: 10rpx;
			box-sizing: border-box;
			background: #f8fafb;
			border-radius: 8rpx;
		}

		.yidu,.yidu2 {
			margin: 16rpx 0;
			width: 100%;
			height: 50rpx;
			color: #3b95ff;
			display: flex;
			align-items: center;
			justify-content: right;
		}
		.yidu2{
			color: #333333;
			._item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	.content {
		display: inline-block;
		width: 654rpx;
		min-height: 100rpx;
		font-size: 30rpx;
		color: #666666;
		padding: 10rpx;
		box-sizing: border-box;
		background: #f8fafb;
		border-radius: 8rpx;
	}
	.yidu {
		margin: 16rpx 0;
		width: 100%;
		height: 50rpx;
		color: #3b95ff;
		display: flex;
		align-items: center;
		justify-content: right;
	}
	}
</style>
